import { Button, Card, Form, Radio, Row, Space } from "antd";
import { useDispatch, useSelector } from "react-redux";
import "./index.scss"
import { CloseCircleFilled } from "@ant-design/icons";
import header1 from '../../assets/images/white_top@2x.png'
import header2 from '../../assets/images/blue_top@2x.png'
import header3 from '../../assets/images/black_top@2x.png'
import side1 from '../../assets/images/white_side@2x.png'
import side2 from '../../assets/images/blue_side@2x.png'
import side3 from '../../assets/images/black_side@2x.png'
import { setThemeStyle } from "@/store/modules/style";
import { useEffect } from "react";
export default function Theme({ onModalClose }) {
    const { mwidth, themeVal } = useSelector(state => state.toggelStyle)
    const [form] = Form.useForm()
    const dispatch = useDispatch()
    const onReset = () => {
        form.resetFields();
        dispatch(setThemeStyle(form.getFieldValue()))
        onModalClose && onModalClose()
    }
    const onFinish = (values) => {
        dispatch(setThemeStyle(values))
        onModalClose && onModalClose()
    };
    useEffect(() => {
        form.setFieldsValue({ ...themeVal })
    }, [form])
    return (
        <div className="modal-container" style={{
            left: mwidth
        }}>
            <Card className="modal-content">
                <div className="head">
                    <h3>自定义导航主题</h3>
                    <CloseCircleFilled className="close-icon" onClick={() => onModalClose()} />
                </div>
                <Form form={form} onFinish={onFinish} layout="vertical">
                    <Form.Item label='顶部导航' name='header' initialValue={1}>
                        <Radio.Group>
                            <Space direction="horizontal">
                                <Radio value={1}>
                                    <img src={header1} alt="白色" />
                                    <p>白色（默认）</p>
                                </Radio>
                                <Radio value={2}>
                                    <img src={header2} alt="蓝色" />
                                    <p>蓝色</p>
                                </Radio>
                                <Radio value={3}>
                                    <img src={header3} alt="黑色" />
                                    <p>黑色</p>
                                </Radio>
                            </Space>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label='侧边导航' name='side' initialValue={1}>
                        <Radio.Group>
                            <Space direction="horizontal">
                                <Radio value={1}>
                                    <img src={side1} alt="白色" />
                                    <p>白色（默认）</p>
                                </Radio>
                                <Radio value={2}>
                                    <img src={side2} alt="蓝色" />
                                    <p>蓝色</p>
                                </Radio>
                                <Radio value={3}>
                                    <img src={side3} alt="黑色" />
                                    <p>黑色</p>
                                </Radio>
                            </Space>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item>
                        <Row justify='center'>
                            <Button type="primary" htmlType="submit">
                                预览
                            </Button>
                            <Button htmlType="button" onClick={onReset}>
                                重置
                            </Button>
                        </Row>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}
